<script setup lang="ts">
import { ref } from 'vue';
import prettyBytes from 'pretty-bytes';
const form: any = ref({})
window.ipcRenderer.invoke("getStore", "config").then((res) => {
    res = res || {}
    form.value = {
        openAtLogin: res.openAtLogin || false,
        autoUpdater: res.autoUpdater || false,
        openAtTray: res.openAtTray || false,
        version: res.version || '',
        theme: res.theme || 'light',
        locale: res.locale || 'zh',
    }
})
const setConfig = (key: string, value: any) => {
    window.ipcRenderer?.send('setConfig', key, value);
}
const onThemeChange = (value: string) => {
    setConfig("theme", value)
}
const openAtLoginChange = (value: string) => {
    setConfig("openAtLogin", value)
}
const openAtTrayChange = (value: string) => {
    setConfig("openAtTray", value)
}
const autoUpdaterChange = (value: string) => {
    setConfig("autoUpdater", value)
}
const locales: any = [
    { code: 'zh', name: '简体中文' },
    { code: 'en', name: 'English' },
]
const onLocaleChange = (value: string) => {
    setConfig("locale", value)
}
const updaterProgress: any = ref({})
const checkUpdate = () => {
    window.ipcRenderer.send("checkUpdate")
}
window.ipcRenderer.on("updaterProgress", (_: any, res: any) => {
    updaterProgress.value = {
        total : res.total ? prettyBytes(res.total) : "-",
        transferred: res.transferred ? prettyBytes(res.transferred) : "-",
        bytesPerSecond: res.bytesPerSecond ? prettyBytes(res.bytesPerSecond) : "-",
        percent: res.percent ? (parseInt(res.percent) / 100) : "-",
    };
})
const openExternal = (url: string) => {
    window.ipcRenderer?.send('openExternal', url);
}
</script>
<template>
    <div class="pt-4 h-full">
        <a-form :model="form" size="mini" class="h-full">
            <a-tabs default-active-key="basic" position="left" class="h-full tabs-h-full">
                <a-tab-pane key="basic" :title="$t('setting.basic')">
                    <a-form-item :label="$t('setting.general')">
                        <div class="mt-1.5">
                            <div class="mb-3">
                                <a-checkbox v-model="form.openAtLogin" @change="openAtLoginChange">
                                    {{ $t('setting.openAtLogin') }}
                                </a-checkbox>
                            </div>
                            <div class="mb-3">
                                <a-checkbox v-model="form.openAtTray" @change="openAtTrayChange">
                                    {{ $t('setting.openAtTray') }}
                                </a-checkbox>
                            </div>
                            <div>
                                <a-checkbox v-model="form.autoUpdater" @change="autoUpdaterChange">
                                    {{ $t('setting.autoUpdater') }}
                                </a-checkbox>
                            </div>
                        </div>
                    </a-form-item>
                    <a-form-item field="theme" :label="$t('setting.theme')">
                        <a-radio-group v-model="form.theme" @change="onThemeChange">
                            <a-radio value="light">{{ $t('setting.themes.light') }}</a-radio>
                            <a-radio value="dark">{{ $t('setting.themes.dark') }}</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item field="locale" :label="$t('setting.locale')">
                        <a-select v-model="form.locale" @change="onLocaleChange" class="!w-32">
                            <a-option v-for="(item, index) in locales" :key="index" :value="item.code">
                                {{ item.name }}
                            </a-option>
                        </a-select>
                    </a-form-item>
                </a-tab-pane>
                <a-tab-pane key="about" :title="$t('setting.about')">
                    <div class="flex items-center justify-center pr-8 h-full flex-col">
                        <div class="flex-1 text-center">
                            <img class="w-12 h-12 mx-auto mt-8" src="../assets/favicon.png" alt="non-copyable" />
                            <div class="font-bold mt-4 mb-6">Toy-Kit {{ form.version }}</div>
                            <div v-if="updaterProgress.percent !== undefined" class="w-52 mx-auto">
                                <div class="flex items-center justify-between text-xs">
                                    <div>{{ updaterProgress.transferred }} / {{ updaterProgress.total }}</div>
                                    <div>{{ updaterProgress.bytesPerSecond }} / S</div>
                                </div>
                                <a-progress :percent="updaterProgress.percent" size="large" :show-text="false" />
                            </div>
                            <a-button v-else @click="checkUpdate" size="mini">{{ $t("setting.checkUpdate") }}</a-button>
                        </div>
                        <div class="flex items-center justify-center gap-2 py-4">
                            <div>{{ $t('setting.license') }}:</div>
                            <a-link @click="openExternal('https://www.apache.org/licenses/LICENSE-2.0')"
                                class="!text-sm">
                                Apache-2.0
                            </a-link>
                        </div>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </a-form>
    </div>
</template>